<template>
  <div style="height:100%;width:100%">
    <div style="height:100%;width:100%" v-if="loading" v-loading="loading"></div>
    <el-container style="height:100%" v-if="!loading">
      <keep-alive>
        <component :is="chosen.component" ref="child"/>
      </keep-alive>
      <el-aside width="650px">
        <div style="background-color: #edf0f5;height:100%;overflow:scroll;padding-bottom: 20px">
          <div style="padding:20px;">
            <h2 style="text-align:center">病历<el-tag color="white" size="mini" style="float:right">复诊</el-tag></h2>
            <!-- <table style="width:100%;">
              <tr>
                <td>姓名：<input type="text" class="mr-input" disabled="disabled" value="" style="width: 60px;"></td>
                <td>性别：<input type="text" class="mr-input" disabled="disabled" value="" style="width: 25px;"></td>
                <td>年龄：<input type="text" class="mr-input" disabled="disabled" value="" style="width: 25px;"></td>
                <td>医保卡号：<input type="text" class="mr-input" disabled="disabled" value="" style="width: 100px;"></td>
              </tr>
              <tr>
                <td>体温：<input type="text" class="mr-input" disabled="disabled" style="width: 50px" value="" />℃</td>
                <td colspan="2">血压：<input type="text" class="mr-input" disabled="disabled" style="width:100px" value="收缩压/舒张压"> mmHg</td>
                <td>心率：<input disabled="disabled" style="width: 100px" class="mr-input">kpm</td>
              </tr>
              <tr>
                <td colspan="4"><el-button type="primary" size="mini">新增</el-button></td>
              </tr>
            </table> -->
            <div style="display: flex;flex-wrap: wrap;" v-if="tempOpen.patientInfo">
              <span v-show="tempOpen.patientInfo.patientName.chosen" class="mr-span">姓名：<b>{{ tempOpen.patientInfo.patientName.value }}</b></span>
              <span v-show="tempOpen.patientInfo.sex.chosen" class="mr-span">性别：<b>{{ tempOpen.patientInfo.sex.value }}</b></span>
              <span v-show="tempOpen.patientInfo.age.chosen" class="mr-span">年龄：<b>{{ tempOpen.patientInfo.age.value }}</b></span>
              <span v-show="tempOpen.patientInfo.medicareId.chosen" class="mr-span">医保卡号：<b>{{ tempOpen.patientInfo.medicareId.value }}</b></span>
              <span v-show="tempOpen.patientInfo.temperature.chosen" class="mr-span">体温：<b>{{ tempOpen.patientInfo.temperature.value }}</b>℃</span>
              <span v-show="tempOpen.patientInfo.sbp.chosen" class="mr-span" v-html="bloodPressure()"></span>
              <span v-show="tempOpen.patientInfo.heartRate.chosen" class="mr-span">心率：<b>{{ tempOpen.patientInfo.heartRate.value }}</b>kpm</span>
              <span v-show="tempOpen.patientInfo.weight.chosen" class="mr-span">体重：<b>{{ tempOpen.patientInfo.weight.value }}</b>kg</span>
              <span v-show="tempOpen.patientInfo.height.chosen" class="mr-span">身高：<b>{{ tempOpen.patientInfo.height.value }}</b>cm</span>
              <span v-show="tempOpen.patientInfo.bmi.chosen" class="mr-span">BMI指数：<b>{{ tempOpen.patientInfo.bmi.value }}</b></span>
              <span v-show="tempOpen.patientInfo.breath.chosen" class="mr-span">呼吸：<b>{{ tempOpen.patientInfo.breath.value }}</b>次/分</span>
              <span v-show="tempOpen.patientInfo.marriage.chosen" class="mr-span">婚孕：<b>{{ tempOpen.patientInfo.marriage.value }}</b></span>
              <span v-show="tempOpen.patientInfo.pulse.chosen" class="mr-span">脉搏：<b>{{ tempOpen.patientInfo.pulse.value }}</b>次/分</span>
              <span v-show="tempOpen.patientInfo.spo2.chosen" class="mr-span">氧饱和度：<b>{{ tempOpen.patientInfo.spo2.value }}</b></span>
            </div>
            <el-button type="primary" size="mini" @click="dialogVisible = true">新增</el-button>
            <el-dialog title="病人要素选择" width="30%" :visible.sync="dialogVisible">
              <el-checkbox v-for="i in Object.values(tempOpen.patientInfo).filter(e => e!=null && typeof e == 'object')" :label="i.label" :key="i.label" v-model="i.chosen"></el-checkbox>
            </el-dialog>
          </div>
          <!-- <div style="clear:both">
            <label class="el-form-item__label">主诉：</label>
            <div class="el-form-item__label mr-div">
              <el-tag size="mini" closable type="info">腹部</el-tag>
              <el-tag size="mini" closable type="info">反复</el-tag>
              <el-tag size="mini" closable type="info">胀痛</el-tag>
              <el-tag size="mini" closable type="info">6天</el-tag>
            </div>
          </div>
          <div style="clear:both">
            <label class="el-form-item__label">现病史：</label>
            <div class="el-form-item__label mr-div">
              <p>全身不适、乏力、畏寒，咳嗽沉闷、咳痰为黄色粘痰，左右侧胸痛、咳嗽及深呼吸时加重；</p>
              <p>曾口服、肌注、输液、（抗炎抗病毒）治疗后，效果不理想，症状无减轻</p>
              <p>饮食欠佳、大便、小便、睡眠、正常</p>
            </div>
          </div> -->
          <form class="el-form el-form--label-left">
            <div :class="['el-form-item',chosen.code == 'chiefComplaint' ? 'chosen' : '']">
              <label class="el-form-item__label" @click="toggleTab('chiefComplaint')">主诉：</label>
              <div class="el-form-item__content mr-div" v-show="chosen.code == 'chiefComplaint'">
                <span v-for="(item, index) in (tempOpen.chiefComplaint && tempOpen.chiefComplaint.data)" :key="index" v-if="item.chosen">
                  <el-tag size="mini" closable @click.native="focus($event, index, 'part')" @close="removeChiefComplaint(item, i, 'part', index)" type="info" v-if="item.part && item.part.length > 0" v-for="(part, i) in item.part" :key="'part' + i">{{ dictIndex.complex.DTMPartType010[part] }}</el-tag>
                  <el-tag size="mini" closable @click.native="focus($event, index, 'level')" @close="removeChiefComplaint(item, index, 'level')" type="info" v-if="item.level">{{ dictIndex.simple.DTMCC040[item.level] }}</el-tag>
                  <el-tag size="mini" closable @click.native="focus($event, index, 'character')" @close="removeChiefComplaint(item, index, 'character')" type="info" v-if="item.character">{{ dictIndex.simple.DTMCC030[item.character] }}</el-tag>
                  <el-tag size="mini" closable @click.native="focus($event, index, 'symptom')" @close="removeChiefComplaint(item, index, 'symptom')" type="info" v-if="item.symptom">{{ dictIndex.simple.DTMCC020[item.symptom] }}</el-tag>
                  <el-tag size="mini" closable @click.native="focus($event, index, 'time')" @close="removeChiefComplaint(item, index, 'time')" type="info" v-if="item.time">{{ item.time + (dictIndex.simple.DTMCC050[item.unit] || '') }}</el-tag>
                  <span v-if="item.follow && item.follow.length > 0">
                    伴随:
                    <span v-for="(e, i) in item.follow" :key="i" style="font-size: smaller">
                      <el-tag size="mini" closable @click.native="focus($event, index, 'f-part', i)" @close="removeChiefComplaint(e, pi, 'f-part', index)" type="warning" v-if="e.part && e.part.length > 0" v-for="(part, pi) in e.part" :key="'part' + pi">{{ dictIndex.complex.DTMPartType010[part] }}</el-tag>
                      <el-tag size="mini" closable @click.native="focus($event, index, 'f-level', i)" @close="removeChiefComplaint(e, i, 'f-level', index)" type="warning" v-if="e.level">{{ dictIndex.simple.DTMCC040[e.level] }}</el-tag>
                      <el-tag size="mini" closable @click.native="focus($event, index, 'f-character', i)" @close="removeChiefComplaint(e, i, 'f-character' ,index)" type="warning" v-if="e.character">{{ dictIndex.simple.DTMCC030[e.character] }}</el-tag>
                      <el-tag size="mini" closable @click.native="focus($event, index, 'f-symptom', i)" @close="removeChiefComplaint(e, i, 'f-symptom', index)" type="warning" v-if="e.symptom">{{ dictIndex.simple.DTMCC020[e.symptom] }}</el-tag>
                      <el-tag size="mini" closable @click.native="focus($event, index, 'f-time', i)" @close="removeChiefComplaint(e, i, 'f-time', index)" type="warning" v-if="e.time">{{ e.time + (dictIndex.simple.DTMCC050[e.unit] || '') }}</el-tag>
                    </span>
                  </span>
                  <br>
                </span>
              </div>
              <div class="el-form-item__content mr-div" v-show="chosen.code != 'chiefComplaint'">
                <p v-html="parsedChiefComplaint"></p>
              </div>
            </div>
            <div :class="['el-form-item',chosen.code == 'HPI' ? 'chosen' : '']">
              <label class="el-form-item__label" @click="toggleTab('HPI')">现病史：</label>
              <div class="el-form-item__content mr-div" v-show="chosen.code == 'HPI'">
                <span>
                  <el-tag type="info" size="mini" v-if="tempOpen.HPI.situation.date" @close="removeHPI(tempOpen.HPI.situation, 'date')" closable>{{ tempOpen.HPI.situation.date }}</el-tag>
                  <el-tag type="info" size="mini" v-if="tempOpen.HPI.situation.cause" @close="removeHPI(tempOpen.HPI.situation, 'cause')" closable v-for="(e, i) in tempOpen.HPI.situation.cause" :key="'situation' + i">{{ dictIndex.simple.DTMPI010[e] }}</el-tag>
                  <el-tag type="info" size="mini" v-if="tempOpen.HPI.unusual.data.length > 0" @close="removeHPI(tempOpen.HPI.unusual, 'checkout', i)" v-for="(e, i) in checkoutArr()" :key="'checkout' + i">{{ e.itemName + ':' + e.resultValue }}</el-tag>
                  <span v-for="(e, i) in tempOpen.HPI.treatment.data" :key="'treatment' + i">
                    <el-tag type="info" size="mini" v-if="e.display" @close="removeHPI(e, 't-display')" closable>{{ dictIndex.simple.DTMPI020[e.display] }}</el-tag>
                    <el-tag type="info" size="mini" v-if="e.method" @close="removeHPI(e, 't-method')" closable>{{ dictIndex.simple.DTMPI030[e.method] }}</el-tag>
                    <el-tag type="info" size="mini" v-if="e.measure && e.method == 'D.104.100001'" @close="removeHPI(e, 't-measure')" closable>{{ dictIndex.simple.DTMPI040[e.measure] }}</el-tag>
                    <el-tag type="info" size="mini" v-if="e.measure && e.method == 'D.104.100002'" @close="removeHPI(e, 't-measure')" closable>{{ dictIndex.simple.DTMPI045[e.measure] }}</el-tag>
                    <el-tag type="info" size="mini" v-if="e.effect" @close="removeHPI(e, 't-effect')" closable>{{ dictIndex.simple.DTMPI050[e.effect] }}</el-tag>
                    <el-tag type="info" size="mini" v-if="e.duration" @close="removeHPI(e, 't-duration')" closable>{{ e.duration + (dictIndex.simple.DTMCC050[e.unit] || '') }}</el-tag>
                  </span>
                </span>
              </div>
              <div class="el-form-item__content mr-div" v-show="chosen.code != 'HPI'">
                <!-- <p>全身不适、乏力、畏寒，咳嗽沉闷、咳痰为黄色粘痰，左右侧胸痛、咳嗽及深呼吸时加重；</p>
                <p>曾口服、肌注、输液、（抗炎抗病毒）治疗后，效果不理想，症状无减轻</p>
                <p>饮食欠佳、大便、小便、睡眠、正常</p> -->
                <p v-html="parsedHPI"></p>
              </div>
            </div>
            <div :class="['el-form-item',chosen.code == 'pastHistory' ? 'chosen' : '']">
              <label class="el-form-item__label" @click="toggleTab('pastHistory')">既往史：</label>
              <div class="el-form-item__content mr-div" v-show="chosen.code == 'pastHistory'">
                <span>
                  <el-tag type="info" size="mini" closable @close="removePastHistory(tempOpen.pastHistory.personal.data, 'personal', i)" v-for="(e, i) in tempOpen.pastHistory.personal.data" :key="'personal' + i">{{ e }}</el-tag>
                  <span v-for="(e, i) in tempOpen.pastHistory.family.data" :key="'family' + i">
                    <el-tag type="info" size="mini" closable @close="removePastHistory(e, 'disease', i)">{{ dictIndex.simple.DTMHI130020[e.disease] }}</el-tag>
                    <el-tag type="info" size="mini" closable @close="removePastHistory(e, 'sibship', i)">{{ dictIndex.simple.DTMHI130010[e.sibship] }}</el-tag>
                    <el-tag type="info" size="mini" closable @close="removePastHistory(e, 'age', i)">{{ e.age }}岁</el-tag>
                  </span>
                  <span v-for="(e, i) in tempOpen.pastHistory.allergic.data" :key="'allergic' + i">
                    <!-- <el-tag size="mini">{{ dictIndex.simple.DTMHI100010[e.source] }}</el-tag> -->
                    <el-tag type="info" size="mini" closable @close="removePastHistory(e, 'source', i)">{{ e.source }}</el-tag>
                    <el-tag type="info" size="mini" closable @close="removePastHistory(e, 'reaction', i)">{{ dictIndex.simple.DTMHI100020[e.reaction] }}</el-tag>
                    <el-tag type="info" size="mini" closable @close="removePastHistory(e, 'level', i)">{{ dictIndex.simple.DTMHI100030[e.level] }}</el-tag>
                  </span>
                  <el-tag type="info" size="mini" closable v-if="tempOpen.pastHistory.menstrual.firstAge" @close="removePastHistory(tempOpen.pastHistory.menstrual, 'firstAge')">初潮年龄:{{ tempOpen.pastHistory.menstrual.firstAge }}</el-tag>
                  <el-tag type="info" size="mini" closable v-if="tempOpen.pastHistory.menstrual.cycle" @close="removePastHistory(tempOpen.pastHistory.menstrual, 'cycle')">月经周期:{{ tempOpen.pastHistory.menstrual.cycle }}</el-tag>
                  <el-tag type="info" size="mini" closable v-if="tempOpen.pastHistory.menstrual.duration" @close="removePastHistory(tempOpen.pastHistory.menstrual, 'duration')">行经天数:{{ tempOpen.pastHistory.menstrual.duration }}</el-tag>
                  <el-tag type="info" size="mini" closable v-if="tempOpen.pastHistory.menstrual.lastDate" @close="removePastHistory(tempOpen.pastHistory.menstrual, 'lastDate')">末次月经日期:{{ tempOpen.pastHistory.menstrual.lastDate }}</el-tag>
                  <el-tag type="info" size="mini" closable v-if="tempOpen.pastHistory.menstrual.endDate" @close="removePastHistory(tempOpen.pastHistory.menstrual, 'endDate')">闭经日期:{{ tempOpen.pastHistory.menstrual.endDate }}</el-tag>
                  <el-tag type="info" size="mini" closable v-if="tempOpen.pastHistory.menstrual.endAge" @close="removePastHistory(tempOpen.pastHistory.menstrual, 'endAge')">绝经年龄:{{ tempOpen.pastHistory.menstrual.endAge }}岁</el-tag>
                  <span v-for="(e, i) in tempOpen.pastHistory.chronic.data" :key="'chronic' + i">
                    <el-tag type="info" size="mini" v-if="e.disease" closable @close="removePastHistory(e, 'disease', i)">{{ dictIndex.simple.DTMHI195020[e.disease] }}</el-tag>
                    <el-tag type="info" size="mini" v-if="e.duration" closable @close="removePastHistory(e, 'duration', i)">{{ e.duration + dictIndex.simple.DTMHI195030[e.durationUnit] }}</el-tag>
                    <el-tag type="info" size="mini" v-if="e.level" closable @close="removePastHistory(e, 'level', i)">{{ dictIndex.simple.DTMHI195040[e.level] }}</el-tag>
                  </span>
                </span>
              </div>
              <div class="el-form-item__content mr-div" v-show="chosen.code != 'pastHistory'">
                <p v-html="parsedPastHistory"></p>
              </div>
            </div>
            <div :class="['el-form-item',chosen.code == 'physicalExamination' ? 'chosen' : '']">
              <label class="el-form-item__label" @click="toggleTab('physicalExamination')">体格检查：</label>
              <div class="el-form-item__content mr-div" v-show="chosen.code == 'physicalExamination'">
                <!-- <p>体温*℃、脉搏*次/分，血压*mmHg，</p>
                <p>神老清楚，急性病容，皮肤粘膜无黄染，无皮疹，浅表淋巴结不大。</p>
                <p>唇疱疹，口唇轻度发绀，咽部充血，双扁桃体*度肿大，气管居中，颈静脉无怒张</p> -->
                <span v-for="(e, i) in _PE" :key="i">
                  <el-tag v-if="e.showFlag" type="info" size="mini">{{ e.name }}:{{ tempOpen.PE.values[e.code] }}{{ e.unit ? e.unit : '' }}</el-tag>
                </span>
              </div>
              <div class="el-form-item__content mr-div" v-show="chosen.code != 'physicalExamination'">
                <p v-html="parsedPE"></p>
              </div>
            </div>
            <div :class="['el-form-item',chosen.code == 'checkout' ? 'chosen' : '']">
              <label class="el-form-item__label" @click="toggleTab('checkout')">检查检验：</label>
              <div class="el-form-item__content mr-div" v-show="chosen.code == 'checkout'">
                <span>
                  <span v-for="(ele, index) in tempOpen.HPI.unusual.data" :key="index">
                    <el-tag type="info" size="mini" closable @close="removeChecked(index ,i, e.itemName)" v-for="(e, i) in ele.data" :key="'checked' + i">{{ e.itemName + ':' + e.resultValue }}</el-tag>
                  </span>
                  <el-tag type="info" closable @close="removeChecking(i, e)" size="mini" v-for="(e, i) in tempOpen.checkout.checking" :key="'checking' + i">{{ e.itemName + '(' + e.number + ')' + e.date + (e.urgent ? '加急' : '') }}</el-tag>
                  <el-tag type="info" closable @close="removeChecking(i, e)" size="mini" v-for="(e, i) in tempOpen.checkout.testing" :key="'testing' + i">{{ e.itemName + '(' + e.number + ')' + e.date + (e.urgent ? '加急' : '') }}</el-tag>
                </span>
              </div>
              <div class="el-form-item__content mr-div" v-show="chosen.code != 'checkout'">
                <p v-html="parsedCheckout"></p>
              </div>
            </div>
            <div :class="['el-form-item',chosen.code == 'preliminaryDiagnosis' ? 'chosen' : '']">
              <label class="el-form-item__label" @click="toggleTab('preliminaryDiagnosis')">初诊断：</label>
              <div class="el-form-item__content mr-div" v-show="chosen.code == 'preliminaryDiagnosis'">
                <span>
                  <el-tag type="info" size="mini" v-for="(e, i) in tempOpen.diagnosis" :key="i">{{ e.diseaseName + ' ' }}{{ e.state | diagnosisState }}</el-tag>
                </span>
              </div>
              <div class="el-form-item__content mr-div" v-show="chosen.code != 'preliminaryDiagnosis'">
                <p v-html="parsedDiagnosis"></p>
              </div>
            </div>
          </form>
          <!-- <el-form label-position="left" label-width="80px">
            <el-form-item label="主诉：">
              <div class="mr-div">
                <el-tag size="mini" closable type="info">腹部</el-tag>
                <el-tag size="mini" closable type="info">反复</el-tag>
                <el-tag size="mini" closable type="info">胀痛</el-tag>
                <el-tag size="mini" closable type="info">6天</el-tag>
              </div>
            </el-form-item>
            <el-form-item label="现病史：">
              <div class="mr-div">
                <p>全身不适、乏力、畏寒，咳嗽沉闷、咳痰为黄色粘痰，左右侧胸痛、咳嗽及深呼吸时加重；</p>
                <p>曾口服、肌注、输液、（抗炎抗病毒）治疗后，效果不理想，症状无减轻</p>
                <p>饮食欠佳、大便、小便、睡眠、正常</p>
              </div>
            </el-form-item>
            <el-form-item label="既往史：">
              <div class="mr-div">
                既往身体健康，无慢性咳嗽病史，无吸烟史
              </div>
            </el-form-item>
            <el-form-item label="体格检查：">
              <div class="mr-div">
                体温*℃、脉搏*次/分，血压*mmHg，
                神老清楚，急性病容，皮肤粘膜无黄染，无皮疹，浅表淋巴结不大。
                唇疱疹，口唇轻度发绀，咽部充血，双扁桃体*度肿大，气管居中，颈静脉无怒张
              </div>
            </el-form-item>
            <el-form-item label="检查检验：">
              <div class="mr-div">
                <p>血红蛋白</p>
              </div>
            </el-form-item>
            <el-form-item label="初诊断：">
              <div class="mr-div">
                &nbsp;
              </div>
            </el-form-item>
          </el-form> -->
        </div>
      </el-aside>
    </el-container>
  </div>
</template>

<script>
import chiefComplaint from './chiefComplaint'
import newChiefComplaint from './chiefComplaint/new'
import pastHistory from './pastHistory'
import HPI from './HPI'
import physicalExamination from './physicalExamination'
import checkout from './checkout'
import preliminaryDiagnosis from './preliminaryDiagnosis'
import { getNowRecord } from '@/api/record'
import { parseChiefComplaint, parseHPI, parsePastHistory, parsePE, parseCheckout, parseDiagnosis } from '@/utils/index'
import { getPE } from '@/api/external'
import { mapGetters } from 'vuex'
import newTemp from './newTemp'

export default {
  name: "MedicalRecord",
  components: {
    chiefComplaint,
    newChiefComplaint,
    pastHistory,
    HPI,
    physicalExamination,
    checkout,
    preliminaryDiagnosis,
    activeTag: null
  },
  data() {
    return {
      loading: true,
      dialogVisible: false,
      str: '',
      patientInfo: {},
      components: {
        chiefComplaint: {
          code: 'chiefComplaint',
          component: 'chiefComplaint'
        },
        pastHistory: {
          code: 'pastHistory',
          component: 'pastHistory'
        },
        HPI: {
          code: 'HPI',
          component: 'HPI'
        },
        physicalExamination: {
          code: 'physicalExamination',
          component: 'physicalExamination'
        },
        checkout: {
          code: 'checkout',
          component: 'checkout'
        },
        preliminaryDiagnosis: {
          code: 'preliminaryDiagnosis',
          component: 'preliminaryDiagnosis'
        }
      },
      chosen: {},
    }
  },
  methods: {
    parseChiefComplaint,
    parseHPI,
    parsePastHistory,
    parsePE,
    parseCheckout,
    parseDiagnosis,
    checkoutArr() {
      let arr = []
      this.tempOpen.HPI.unusual.data.forEach(e => {
        e.data.forEach(i => {
          arr.push(i)
        })
      })
      return arr
    },
    focus(event, index, paramCode, fIndex) {
      if (this.activeTag) {
        this.activeTag.classList.remove('el-tag-active')
      }
      event.currentTarget.classList.add('el-tag-active')
      this.activeTag = event.currentTarget
      this.tempOpen.chiefComplaint.data.forEach((e, i) => {
        if (i == index) {
          this.$set(e, 'changing', true)
          this.$refs.child.$data.chosenFollow = null
        } else {
          this.$set(e, 'changing', false)
        }
      })
      if (paramCode == 'part') {
        this.$refs.child.$data.partDialog = true
        this.$refs.child.$data.partChoosing = this.tempOpen.chiefComplaint.data[index]
      } else if (paramCode.startsWith('f-')) {
        if (paramCode == 'f-part') {
          this.$refs.child.$data.partDialog = true
          this.$refs.child.$data.partChoosing = this.tempOpen.chiefComplaint.data[index].follow[fIndex]
        }
        this.$refs.child.$data.followParent = this.$refs.child.title(this.tempOpen.chiefComplaint.data[index])
        this.$refs.child.$data.chosenFollow = this.tempOpen.chiefComplaint.data[index].follow
        setTimeout(() => {
          this.$refs.child.$refs[paramCode][fIndex].$el.querySelector('input').click()
          this.$refs.child.$refs[paramCode][fIndex].$el.querySelector('input').focus()
        }, 100)
      } else {
        setTimeout(() => {
          this.$refs.child.$refs[paramCode][index].$el.querySelector('input').click()
          this.$refs.child.$refs[paramCode][index].$el.querySelector('input').focus()
        }, 100)
      }
      // this.$refs.child.$refs['content'].$el.querySelector('input').focus()
    },
    bloodPressure() {
      let p = this.tempOpen.patientInfo
      return `血压：${ p.sbp.value  ? '<b>' + p.sbp.value + '</b>' : '收缩压' }/${ p.dbp.value ? '<b>' + p.dbp.value + '</b>' : '舒张压' }mmHg`
    },
    handleConfirm() {
      this.dialogVisible = false
    },
    toggleTab(flag) {
      if (!this.$route.query.templateId && flag == 'preliminaryDiagnosis') {
        return false
      }
      if (!this.$route.query.patientId && flag == 'preliminaryDiagnosis') {
        return false
      }
      this.chosen = this.components[flag]
    },
    removeChiefComplaint(item, index, paramCode, parentIndex) {
      // this.$refs.child.$refs.k1.$el.style.visibility = 'hidden'
      if (paramCode.endsWith('time')) {
        this.$delete(item, 'time')
        this.$delete(item, 'unit')
      } else if (paramCode.endsWith('part')) {
        item.part.splice(index ,1)
        if (item.part.length == 0) {
          this.$delete(item, 'part')
        }
      } else {
        this.$delete(item, paramCode.startsWith('f-') ? paramCode.substr(2) : paramCode)
      }
      if (!paramCode.startsWith('f-')) {
        let keys = Object.keys(item)
        if (!keys.includes('level') && !keys.includes('character') && !keys.includes('part') && !keys.includes('symptom') && !keys.includes('time')) {
          this.tempOpen.chiefComplaint.data.splice(parentIndex, 1)
        }
      }
      // this.$forceUpdate()
    },
    removeHPI(e, paramCode, i) {
      if (paramCode == 'date' || paramCode == 'cause') {
        this.$delete(e, paramCode)
      }
      if (paramCode == 'checkout') {
        // e.data.splice(i, 1)
      }
      if (paramCode.endsWith('_type') || paramCode.endsWith('duration') || paramCode.endsWith('effect') || paramCode.endsWith('metering') || paramCode.endsWith('name') || paramCode.endsWith('rate')) {
        this.$delete(e, paramCode.substr(2))
      }
    },
    removePastHistory(e, paramCode, i) {
      if (paramCode == 'personal') {
        e.splice(i, 1)
      } else {
        this.$delete(e, paramCode)
      }
      if (paramCode == 'disease' || paramCode == 'sibship' || paramCode == 'age') {
        let keys = Object.keys(e)
        if (!keys.includes('disease') && !keys.includes('sibship') && !keys.includes('age')) {
          this.tempOpen.pastHistory.family.data.splice(i, 1)
        }
      }
      if (paramCode == 'source' || paramCode == 'reaction' || paramCode == 'level') {
        let keys = Object.keys(e)
        if (!keys.includes('source') && !keys.includes('reaction') && !keys.includes('level')) {
          this.tempOpen.pastHistory.family.data.splice(i, 1)
        }
      }
    },
    removeChecked(pi, i, itemName) {
      this.tempOpen.HPI.unusual.data[pi].data.splice(i, 1)
      this.tempOpen.checkout.checked.forEach(ele => {
        ele.data.forEach(e => {
          if (e.itemName == itemName) {
            this.$set(e, 'chosen', false)
          }
        })
      })
    },
    removeChecking(index, ele) {
      if (this.$refs.child.$refs.child.catalogChosen && this.$refs.child.$refs.child.bb() == 'checking') {
        let contentChosen = this.$refs.child.$refs.child.catalogChosen[ele.stackCode].contentChosen
        this.$refs.child.$refs.child.catalogChosen[ele.stackCode].contentChosen = contentChosen.filter(e => e != ele.itemCode)
        this.$refs.child.$refs.child.checkState(ele.stackCode)
      }
      this.tempOpen.checkout.checking.splice(index, 1)
    },
    removeTesting(index, ele) {
      if (this.$refs.child.$refs.child.catalogChosen && this.$refs.child.$refs.child.bb() == 'testing') {
        let contentChosen = this.$refs.child.$refs.child.catalogChosen[ele.stackCode].contentChosen
        this.$refs.child.$refs.child.catalogChosen[ele.stackCode].contentChosen = contentChosen.filter(e => e != ele.itemCode)
        this.$refs.child.$refs.child.checkState(ele.stackCode)
      }
      this.tempOpen.checkout.testing.splice(index, 1)
    },
    initPE() {
      return new Promise((resolve, reject) => {
        getPE().then(res => {
          this.tempOpen.PE.items.small = []
          this.tempOpen.PE.items.big = []
          res.data.forEach(e => {
            let disabled = false
            if (this.tempOpen.patientInfo[e.interfacefieldCode] && this.tempOpen.patientInfo[e.interfacefieldCode].value) {
              disabled = true
              this.tempOpen.PE.values[e.interfacefieldCode] = this.tempOpen.patientInfo[e.interfacefieldCode].value
            } else {
              disabled = false
            }
            if (e.tableshowFlag == '1') {
              this.tempOpen.PE.items.small.push({
                code: e.interfacefieldCode,
                name: e.interfacefieldName,
                _type: e.remark,
                max: e.maxLength,
                unit: e.showUnit,
                showFlag: e.hiddenFlag == '0',
                // disabled: disabled
              })
            }
            if (e.tableshowFlag == '2') {
              this.tempOpen.PE.items.big.push({
                code: e.interfacefieldCode,
                name: e.interfacefieldName,
                _type: e.remark,
                max: e.maxLength,
                unit: e.showUnit,
                showFlag: e.hiddenFlag == '0',
                // disabled: disabled
              })
            }
            resolve()
          })
        }).catch(err => reject(err))
      })
    },
    // 初始化模板或病历记录
    initTempOrRecord() {
      return new Promise((resolve, reject) => {
        if (!this.$route.query.templateId) {
          let _tempOpen = JSON.parse(JSON.stringify(newTemp))
          // let _tempOpen = newTemp
          _tempOpen.templateOwner = this.$route.query.templateOwner ? this.$route.query.templateOwner : this.$store.getters.opCode
          _tempOpen.templateOwnerName = this.$route.query.templateOwnerName ? this.$route.query.templateOwnerName : this.$store.getters.opName
          _tempOpen.templateOwnerType = this.$route.query.templateOwnerType ? this.$route.query.templateOwnerType : 'doctor'
          console.log(_tempOpen)
          this.$store.commit('SET_TEMP_OPEN', _tempOpen)
          this.components.chiefComplaint.component = 'newChiefComplaint'
          this.initPE().then(() => {
            resolve()
          })
        } else if (this.$route.query.type == 'r' && this.$route.query.patientId) {
          getNowRecord(this.$route.query.patientId, this.$route.query.templateId).then(res => {
            if (res.data && res.data._id) {
              this.$store.commit('SET_TEMP_OPEN', res.data)
              resolve()
            } else {
              this.$store.dispatch('getTemplateById', this.$route.query.templateId).then(() => {
                this.$store.dispatch('getPatientInfo', this.$route.query.patientId).then(patientInfo => {
                  // 数据库里的就诊编号
                  this.tempOpen.patientInfo.id = patientInfo.recordId
                  this.tempOpen.patientInfo.patientId = patientInfo.patientId
                  this.tempOpen.patientInfo.telephone = patientInfo.telephone
                  this.tempOpen.patientInfo.cardId = patientInfo.cardId
                  this.tempOpen.patientInfo.birtplace = patientInfo.birtplace
                  this.tempOpen.patientInfo.birthday = patientInfo.birthday
                  this.tempOpen.patientInfo.vocation = patientInfo.vocation
                  this.tempOpen.patientInfo.address = patientInfo.address
                  // 可选显示项
                  this.tempOpen.patientInfo.patientName.value = patientInfo.patientName
                  this.tempOpen.patientInfo.medicareId.value = patientInfo.medicareId
                  this.tempOpen.patientInfo.sex.value = patientInfo.sex
                  this.tempOpen.patientInfo.age.value = patientInfo.age
                  this.tempOpen.patientInfo.temperature.value = patientInfo.temperature
                  this.tempOpen.patientInfo.sbp.value = patientInfo.sbp
                  this.tempOpen.patientInfo.dbp.value = patientInfo.dbp
                  this.tempOpen.patientInfo.heartRate.value = patientInfo.heartRate
                  this.tempOpen.patientInfo.weight.value = patientInfo.weight
                  this.tempOpen.patientInfo.height.value = patientInfo.height
                  this.tempOpen.patientInfo.bmi.value = patientInfo.bmi
                  this.tempOpen.patientInfo.breath.value = patientInfo.breath
                  this.tempOpen.patientInfo.marriage.value = patientInfo.marriage
                  this.tempOpen.patientInfo.pulse.value = patientInfo.pulse
                  this.tempOpen.patientInfo.spo2.value = patientInfo.spo2
                  // this.tempOpen.patientInfo.visitDate.value = patientInfo.visitDate
                  // this.tempOpen.patientInfo.visitDept.value = patientInfo.visitDept
                  // this.tempOpen.patientInfo.visitDoctor.value = patientInfo.visitDoctor
                  // this.tempOpen.patientInfo.visitTime.value = patientInfo.visitTime
                  // 找出异常项
                  this.tempOpen.HPI.unusual.data = []
                  patientInfo.checked.forEach(e => {
                    let temp = []
                    e.data.forEach(ele => {
                      if (ele.resultValue < ele.startRange || ele.resultValue > ele.endRange) {
                        this.$set(ele,'chosen', true)
                        this.$set(ele,'unusual', true)
                        temp.push(ele)
                      } else {
                        this.$set(ele,'chosen', false)
                        this.$set(ele,'unusual', false)
                      }
                    })
                    if (temp.length > 0) {
                      this.tempOpen.HPI.unusual.data.push({
                        hospital: e.hospital,
                        name: e.name,
                        dateTime: e.dateTime,
                        data: temp
                      })
                    }
                  })
                  this.$set(this.tempOpen.checkout, 'checked', patientInfo.checked)
                  this.initPE().then(() => {
                    resolve()
                  })
                }).catch(err => reject(err))
              }).catch(err => reject(err))
            }
          }).catch(err => reject(err))
        } else {
          this.$store.dispatch('getTemplateById', this.$route.query.templateId).then(() => {
            resolve()
          })
        }
      })
    }
  },
  created() {
    this.loading = true
    this.initTempOrRecord().then(() => {
      this.loading = false
      this.chosen = this.components.chiefComplaint
    })
  },
  mounted() {
  },
  filters: {
    diagnosisState(val) {
      if (!val) {
        return ''
      } else if (val == 'confirm') {
        return '确诊'
      } else if (val == 'unconfirm') {
        return '疑似'
      }
    }
  },
  computed: {
    ...mapGetters([
      'tempOpen',
      'dictIndex'
    ]),
    _PE() {
      return this.tempOpen.PE.items.small.concat(this.tempOpen.PE.items.big)
    },
    parsedChiefComplaint() {
      return parseChiefComplaint(this.tempOpen.chiefComplaint, this.dictIndex)
    },
    parsedHPI() {
      return parseHPI(this.tempOpen.HPI, this.dictIndex)
    },
    parsedPastHistory() {
      return parsePastHistory(this.tempOpen.pastHistory, this.dictIndex)
    },
    parsedPE() {
      return parsePE(this.tempOpen.PE)
    },
    parsedCheckout() {
      return parseCheckout(this.tempOpen)
    },
    parsedDiagnosis() {
      return parseDiagnosis(this.tempOpen.diagnosis)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .mr-span {
    white-space: nowrap;
    margin-right: 30px;
    margin-bottom: 10px;
    // .mr-input {
    //   min-width: 60px;
    //   border-left:0px;
    //   border-top:0px;
    //   border-right:0px;
    //   border-bottom:1px solid #d6d7d7;
    //   background-color: #edf0f5;
    // }
  }
  .chosen {
    background-color: white;
    .mr-div {
      border-bottom: 1px solid #36a9ff;
      line-height: 25px;
    }
    .el-form-item__label {
      color: #36a9ff;
    }
  }
  .el-checkbox {
    margin: 10px 10px;
    padding: 5px 5px;
    display: block;
  }
  .el-form-item {
    margin-bottom: 1 0px;
    padding: 0px 20px;
  }
  .mr-div {
    border-left: 0px;
    border-right: 0px;
    border-top: 0px;
    border-bottom: 1px solid #d6d7d7; 
    margin-left: 80px;
    min-height: 30px;
    p {
      line-height: 1.5em;
      margin: 0;
      padding: 0;
      font-size: small;
    }
    .el-tag {
      cursor: pointer;
    }
  }
  label {
    cursor: pointer;
  }
  b {
    border-bottom: 1px solid #dfe1e3;
    display: inline-block;
    padding: 0px 10px;
    min-width: 50px;
  }
</style>
<style rel="stylesheet/scss" lang="scss">
  .el-tag-active {
    background-color: #5fbbff;
    color: white;
    .el-icon-close {
      color: white;
    }
  }
</style>